<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

<!--
html,body {
    margin:0px;
    height:100%;
}

.cc {
    height:90%;
    width:90%;
    border:1px solid gray;
}

-->

</style>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script language="javascript">

var line = 0;
var map;

function del(){
    if($("#newDiv")){
        $("#newDiv").remove();
        line = 0;
    }
}

function showMap(school){
	map = new BMap.Map("container");
	var pt = new BMap.Point(school.longitude, school.latitude);
	map.setCurrentCity("南京");
	map.centerAndZoom(pt, 19);
	map.enableScrollWheelZoom(true);
	map.addControl(new BMap.NavigationControl());
	var marker = new BMap.Marker(new BMap.Point(school.longitude, school.latitude));  // 创建标注
	map.addOverlay(marker);
	var infoWindow = new BMap.InfoWindow(school.name);
	marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});
	
	$.post("getHousesAreaBySchool.action", 
			{
		       schId: school.pid,
		       areaType: "circle_area"
			},
		    function(data){
		        $.each(data, function(areaIdx, area) {
		            //alert(area.radius);
		        	var point = new BMap.Point(area.centerXAxis, area.centerYAxis);
		        	var point1 = new BMap.Point(area.maxX, area.maxY);
		        	var distance = map.getDistance(point, point1);
		        	var circle = new BMap.Circle(point,distance);
		        	circle.addEventListener("click", 
		        			function(){
		        		        var houseList = area.nodes;
		        		        var sContent = "<div><table valign='center'><tr><td colspan='2'><h4 style='margin:0 0 5px 0;padding:0.2em 0'>该区域里的学区房</h4><td><tr>";
		        		        var i;
		        		        for(i=0; i<houseList.length; i++){
		        		        	var node = houseList[i];
		        		        	sContent += "<tr>"
		        		        		   +"<td><img style='float:right;margin:4px' id='imgDemo"+i+"' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='"+node.name+"'/></td>"
		        		        		   +"<td nowrap>小区名字:" + node.name +" <br>地址:<a href='search.jsp'>地址我也不知道是什么，你自己找找吧...</a></td>"
		        		        		   +"</tr>";
		        		        }
		        		        sContent+="</table></div>";
		        		        var infoWindow = new BMap.InfoWindow(sContent);
		        		        map.openInfoWindow(infoWindow, point);
		        		        for(var j=0; j<i; j++){
		        		            document.getElementById('imgDemo'+j).onload = function (){
		        		                    infoWindow.redraw();
		        		                };
                                }
		        		    });
		        	map.addOverlay(circle);
		        });
		    },
		    "json");
	
}

$(document).ready(function(){
	
	var schools;
	
    $(document.body).click(function(){
        del();
    });
           
    $(document).keydown(function(){
        if($("#newDiv")){
            if(event.keyCode == 40){
                $(".google > tbody > tr").eq(line)
                    .css("backgroundColor", "blue")
                    .css("color", "white");
                $(".google > tbody > tr").eq(line < 0 ? 0 : line - 1)
                    .css("backgroundColor", "white")
                    .css("color", "black");
                line = (line == $(".google > tbody > tr").length ? 0 : line + 1);
            }else if(event.keyCode == 38){
                line = (line == 0 ? $(".google > tbody > tr").length : line - 1);
                $(".google > tbody > tr").eq(line)
                    .css("backgroundColor", "blue")
                    .css("color", "white");
                $(".google > tbody > tr").eq(line > $(".google > tbody > tr").length ? 0 : line + 1)
                    .css("backgroundColor", "white")
                    .css("color", "black");
            }else if(event.keyCode == 13){
                $("#skey").val($(".google > tbody > tr").eq(line - 1).find("td").eq(0).html());
                showMap(schools[line-1]);
                del();                
            }
        }   
    });
       
	$("#skey").keyup(function(){
		
		if(event.keyCode == 13 || event.keyCode == 38 || event.keyCode == 40)
			return;
		
		del();
           
        var top = $("#skey").offset().top;
        var left = $("#skey").offset().left;
        var newDiv = $("<div/>").width($("#skey").width()+4 )
            .css("position", "absolute")
            .css("backgroundColor", "white")
            .css("left", left)
            .css("top", top + $("#skey").height() + 6)
            .css("border", "1px solid blue")
            .attr("id", "newDiv");
                   
        var table = $("<table class='google' width='100%'/>")
            .attr("cellpadding", "0")
            .attr("cellspacing", "0");
                   
        $.post("searchSchool.action", {key: $("#skey").val()}, function(data){
        	var len = data.length;
        	schools = new Array(len);
        	$.each(data, function(schoolIdx, school) {
        		 var skey = school.name;
                             
                 var tr = $("<tr/>").css("cursor", "pointer").mouseout(function(){
                     $(this).css("backgroundColor", "white").css("color", "black");
                 }).mouseover(function(){
                     $(this).css("backgroundColor", "blue").css("color", "white");
                 }).click(function(){
                     $("#skey").val($(this).find("td").eq(0).html());                          
                     showMap(school);
                     del();
                 });
                 var td1 = $("<td/>").html(skey)
                     .css("margin", "5 5 5 5");
                 tr.append(td1);
                 table.append(tr);
                 schools[schoolIdx] = school;
            });

            newDiv.append(table);
    	}, "json");
               
	    $(document.body).append(newDiv);
	
	    if($("#skey").val() == ""){
	        $("#newDiv").remove();
	    }
	});
});
</script>
</head>
<body>
<input type="text" autocomplete="off" name = "skey" id ="skey" size="100">
<div class="cc" id="container"></div>
</body>
</html>